* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    body {
      background: linear-gradient(145deg, #f4f7fc 0%, #e2eaf6 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2rem 1.5rem;
    }

    .seo-dashboard {
      max-width: 1300px;
      width: 100%;
      background: rgba(255,255,255,0.8);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 3rem;
      box-shadow: 0 25px 50px -10px rgba(0,20,50,0.25), 0 0 0 1px rgba(66, 153, 225, 0.3) inset;
      padding: 2.2rem;
      border: 1px solid rgba(255,255,255,0.6);
    }

    /* header */
    .headline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2.2rem;
    }
    .title h1 {
      font-size: 2.4rem;
      font-weight: 700;
      background: linear-gradient(160deg, #0b3550, #1f5a8e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .title h1 span {
      background: #234e7c;
      color: white;
      font-size: 1rem;
      padding: 0.3rem 1.2rem;
      border-radius: 60px;
      -webkit-text-fill-color: white;
      font-weight: 500;
    }
    .property-strip {
      display: flex;
      gap: 1.2rem;
      background: #ffffffc7;
      padding: 0.6rem 1.8rem;
      border-radius: 60px;
      box-shadow: 0 6px 12px rgba(0,30,60,0.08);
    }
    .prop-pill {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      color: #1b3b5c;
      font-weight: 500;
    }
    .prop-pill strong {
      background: #e5eefc;
      padding: 0.3rem 1rem;
      border-radius: 30px;
      font-size: 0.85rem;
      color: #0a314b;
    }

    /* main generator grid */
    .generator-grid {
      display: grid;
      grid-template-columns: 1.3fr 0.9fr;
      gap: 2rem;
      margin-bottom: 2.5rem;
    }

    /* left: blog preview */
    .blog-preview {
      background: #ffffffdb;
      border-radius: 2rem;
      border: 1px solid #d9e8ff;
      overflow: hidden;
      box-shadow: 0 12px 28px rgba(0,20,40,0.08);
    }
    .preview-header {
      background: #f3f8ff;
      padding: 1rem 1.6rem;
      border-bottom: 1px solid #cbdaf0;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .preview-header .badge {
      background: #1f5a8e;
      color: white;
      padding: 0.2rem 1.2rem;
      border-radius: 30px;
      font-size: 0.75rem;
      font-weight: 600;
    }
    .blog-content {
      padding: 1.8rem;
    }
    .blog-title {
      font-size: 1.9rem;
      font-weight: 700;
      color: #0a1f31;
      margin-bottom: 0.5rem;
    }
    .blog-meta {
      display: flex;
      gap: 1.2rem;
      color: #486f97;
      font-size: 0.9rem;
      border-bottom: 1px dashed #b9d0e7;
      padding-bottom: 1rem;
      margin-bottom: 1.2rem;
    }
    .blog-text {
      color: #1d3a55;
      line-height: 1.6;
    }
    .blog-text p {
      margin-bottom: 1rem;
    }
    .internet-indicator {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #e0f0ea;
      border-radius: 40px;
      padding: 0.2rem 1rem;
      font-size: 0.8rem;
      color: #076b4b;
      border: 1px solid #81c0a5;
    }

    /* right: SEO property panel */
    .seo-property-panel {
      background: #ffffffde;
      border-radius: 2rem;
      border: 1px solid #c5daf2;
      padding: 1.8rem;
      box-shadow: 0 12px 24px rgba(0,30,60,0.05);
    }
    .seo-property-panel h3 {
      font-size: 1.4rem;
      color: #0b3550;
      margin-bottom: 1.8rem;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .prop-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.8rem 0;
      border-bottom: 1px solid #d5e2f0;
    }
    .prop-line:last-child {
      border-bottom: none;
    }
    .prop-label {
      color: #2d4b6e;
      font-weight: 450;
    }
    .prop-value {
      background: #e5effa;
      padding: 0.3rem 1.2rem;
      border-radius: 40px;
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 0.85rem;
      border: 1px solid #9dbde0;
    }
    #refreshSeoProps {
      background: #1f5a8e;
      border: none;
      color: white;
      width: 100%;
      padding: 0.8rem 1rem;
      border-radius: 50px;
      font-weight: 600;
      margin-top: 1.5rem;
      cursor: pointer;
      transition: 0.15s;
      border: 1px solid #5290ce;
      letter-spacing: 0.3px;
    }
    #refreshSeoProps:hover {
      background: #286fab;
      box-shadow: 0 8px 18px #1f5a8e55;
    }

    /* FILE SECTION */
    .file-section h2 {
      font-size: 1.8rem;
      color: #0b2b44;
      margin-bottom: 1.2rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .file-section h2 .limit {
      background: #1a3e5c;
      color: white;
      font-size: 0.9rem;
      padding: 0.3rem 1.2rem;
      border-radius: 40px;
      font-weight: 400;
    }
    .table-wrapper {
      overflow-x: auto;
      border-radius: 1.8rem;
      background: #ffffffec;
      border: 1px solid #c2d6ec;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 600px;
    }
    th {
      text-align: left;
      padding: 1.2rem 1.5rem;
      background: #eaf2fb;
      color: #153b58;
      font-weight: 600;
      border-bottom: 1px solid #b8cde4;
    }
    td {
      padding: 1.2rem 1.5rem;
      border-bottom: 1px solid #d5e3f1;
      color: #173e5c;
    }
    .file-size {
      background: #eaf2fb;
      padding: 0.3rem 1rem;
      border-radius: 40px;
      font-size: 0.85rem;
      display: inline-block;
    }
    .file-size.exceed {
      background: #fce1e1;
      color: #a52a2a;
      border: 1px solid #d88a8a;
    }
    .btn {
      background: #1f5a8e;
      border: none;
      color: white;
      padding: 0.5rem 1.5rem;
      border-radius: 40px;
      font-weight: 500;
      font-size: 0.9rem;
      cursor: pointer;
      transition: 0.15s;
      border: 1px solid #5c96cc;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .btn:disabled, .btn.disabled {
      background: #8ba5c2;
      border-color: #a1b6d1;
      pointer-events: none;
      opacity: 0.5;
    }
    .secure-code {
      background: #e5effa;
      padding: 0.25rem 1rem;
      border-radius: 30px;
      font-family: 'Fira Code', monospace;
      font-size: 0.8rem;
      border: 1px dashed #1f5a8e;
      display: inline-block;
    }
    .countdown-badge {
      background: #fdefd4;
      padding: 0.3rem 1.2rem;
      border-radius: 40px;
      color: #aa5f1e;
      font-size: 0.85rem;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid #e2ac6c;
    }
    .action-cell {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      align-items: flex-start;
    }
    .footnote {
      text-align: right;
      margin-top: 1rem;
      color: #466282;
      font-size: 0.8rem;
    }
    .error-message {
      background: #ffecf0;
      color: #b91c1c;
      border: 1px solid #f9acac;
      border-radius: 60px;
      padding: 0.5rem 1.2rem;
      font-size: 0.9rem;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 1rem;
    }